<template>
    <div class="parent">
        <header class="header">
            <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">修改密码</span></x-header>
        </header>
        <main class="main">
            <ul class="list">
                <li class="listItem">
                    <label for="">旧密码:</label>
                    <input type="text" placeholder="请输入原始密码" v-model.trim="oldPwd">
                </li>
                <li class="listItem">
                    <label for="">新密码:</label>
                    <input type="text" placeholder="请输入新密码" v-model.trim="newPwd">
                </li>
                <li class="listItem">
                    <label for="">确认密码:</label>
                    <input type="text" placeholder="确认密码" v-model.trim="againNewPwd">
                </li>
            </ul>
            <div class="backBtn">
                <div class="btn" @click="queryBtn">
                    <x-button class="xbtn">确定</x-button>
                </div>
            </div>
        </main>
    </div>
</template>
<script>
import { XHeader, XButton } from 'vux'
import Qs from 'qs'
// import { setTimeout } from 'timers';
export default {
    name: 'Password',
    data () {
        return {
            oldPwd: '',
            newPwd: '',
            againNewPwd: ''
        }
    },
    components: {
        XHeader,
        XButton
    },
    methods: {
        queryBtn () {
            const reg = /^[\w]{6,16}$/;
            let pwd = reg.test(this.newPwd)
            const oldPwd = JSON.parse(sessionStorage.getItem("userInfo")).loginPwd;
            if (this.oldPwd === oldPwd && pwd && (this.newPwd === this.againNewPwd)) {
                sessionStorage.setItem("loginPwd", this.newPwd);
                // alert('密码修改成功')
                // this.$axios.post('http://192.168.1.26:8080/app/mock/16/api/changepassword',Qs.stringify({
                //     oldPassword: this.oldPwd,
                //     newPasswordOne: this.newPwd,
                //     newPasswordTwo: this.againNewPwd
                // })).then((res) => {
                //     setTimeout(() => {
                //         this.$router.go(-1)
                //     }, 600)
                // })
            }
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 1);
}
.header{
    width: 100%;
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.main{
    width: 100%;
}
.list{
    width: 100%;
    .listItem{
        width: 100%;
        height: 1.333333rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0rem .48rem;
        position: relative;
        background: #fff;
        label{
            display: block;
            width:  2.373333rem;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(82,82,82,1);
            line-height:17px;
            letter-spacing:1px;
        }
        input{
            width: 6.666667rem;
            height: 100%;
            outline: none;
            border: none;
        }
        input::-webkit-input-placeholder{
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(204,204,204,1);
            line-height:17px;
            letter-spacing:1px;
        }
    }
    .listItem:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: #cccccc;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}
.backBtn{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 4.213333rem;
    .btn{
        width: 7.333333rem;
        height: 1.28rem;
        .xbtn{
            width: 100%;
            height: 100%;
            color: #fff;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            letter-spacing:1px;
            background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
        }
    }
}
</style>
